<template>
	<view class="content">
		<!--    <web-view src="/static/privacy.html"></web-view>
    <mp-html :content="content.nodes" /> -->
		<view v-html="content.nodes"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		$getTreaty
	} from "@/http/apiManager.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import parseHtml from "@/util/html-parse.js"

	let content = reactive({
		nodes: ``,
	})

	function formatTable(content) {
		if (content) {
			content = content.replace(/<br[^>]*\/>/gi, "")
			content = content.replace(/<td[^<>]*>/gi, '<td style="padding:0px;height:auto;word-break:break-all;">')
			content = content.replace(/<td[^<>]*>\s*?<p>/gi, "<td>")
			content = content.replace(
				/<table[^>]*>/gi,
				'<table cellpadding="0" cellspacing="0" max-width="100%" border="1" style="font-size:12px;max-width:100%; text-align:left;text-indent: 0em;line-height:12px;"'
			)
			return content
		} else {
			return null
		}
	}
	onLoad(() => {
		$getTreaty().then(({
			bizData
		}) => {
			content.nodes = bizData.agentPrivacyPolicy
		})
	})
</script>

<style lang="scss" scoped>
	.content {
		box-sizing: border-box;
		padding: 0 50rpx;

		.first-title {
			text {
				font-size: 33rpx;
			}
		}

		.first-title,
		.second-title,
		.third-title {
			margin-bottom: 20rpx;

			text {
				font-weight: 700;
				letter-spacing: 0.07em;
			}
		}

		.second-title {
			text {
				font-size: 28rpx;
			}
		}

		.third-title {
			text {
				font-size: 26rpx;
			}
		}

		.paragraph {
			margin-bottom: 50rpx;

			text {
				font-weight: 500;
				font-size: 25rpx;
				letter-spacing: 0.07em;
				line-height: 50rpx;
			}

			.link {
				color: #175be6;
			}
		}

		.three-item {
			.item-text {
				margin-bottom: 30rpx;

				text {
					font-weight: 500;
					font-size: 25rpx;
				}
			}
		}

		.h-table {
			margin-bottom: 50rpx;

			/* 行 */
			.h-tr {
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: stretch;
				align-content: center;

				border-color: #ccc;
				border-style: solid;
				border-width: 0;
				border-top-width: 1px;
				border-left-width: 1px;
				border-bottom-width: 1px;
				color: #333;
			}

			/* 单元格 */
			.h-td {
				font-size: 24rpx;
				box-sizing: border-box;
				padding: 3px;
				word-break: break-all;
				border-color: #ccc;
				border-style: solid;
				border-width: 0;
				border-right-width: 1px;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
				align-items: center;
				align-content: center;
				min-height: 64rpx;
				width: 25%;

				/* 跨列 */
				&-colspan {
					flex-grow: 1;
					width: 0;
				}

				/* 内容顶部对齐 */
				&-top {
					align-items: flex-start;
					align-content: flex-start;
				}

				/* 内容底部对齐 */
				&-bottom {
					align-items: flex-end;
					align-content: flex-end;
				}

				/* 内容左边对齐 */
				&-left {
					justify-content: flex-start;
				}

				/* 内容右边对齐 */
				&-right {
					justify-content: flex-end;
				}
			}

			/* 表头 */
			.h-thead {
				background-color: #e6e6e6;
			}

			/* 表格虚线 */
			&-dashed {
				.h-tr {
					border-top-style: dashed;
					border-left-style: dashed;
					border-bottom-style: dashed;
				}

				.h-td {
					border-right-style: dashed;
				}
			}

			/* 表格主题 Map，颜色摘自 Bootstrap */
			$theme-table: (
				primary: (color: #fff,
					bgColor: #337ab7,
					border: #2e6da4,
				),
				success: (color: #fff,
					bgColor: #5cb85c,
					border: #4cae4c,
				),
				info: (color: #fff,
					bgColor: #5bc0de,
					border: #46b8da,
				),
				warning: (color: #fff,
					bgColor: #f0ad4e,
					border: #eea236,
				),
				danger: (color: #fff,
					bgColor: #d9534f,
					border: #d43f3a,
				),
			);

		/* 生成主题代码 */
		$theme-table-keys: map-keys($theme-table);

		@each $k in $theme-table-keys {
			$item: map-get($theme-table, $k);

			&-#{$k} {
				.h-tr {
					border-top-color: map-get($item, border);
					border-left-color: map-get($item, border);
					border-bottom-color: map-get($item, border);
					color: map-get($item, bgColor);
				}

				.h-td {
					border-right-color: map-get($item, border);
				}

				.h-thead {
					background-color: map-get($item, bgColor);
					color: map-get($item, color);
				}
			}
		}
	}
	}
</style>